<script setup>
import axios from "axios";
import {onMounted, ref} from "vue";
import {message} from "ant-design-vue";
import server from "../../config/server.js";

const columns = [
  {
    name: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    name: '开始时间',
    dataIndex: 'course_start_time',
    key: 'course_start_time',
  },
  {
    name: '结束时间',
    dataIndex: 'course_end_time',
    key: 'course_end_time',
  },
  {
    name: '星期几',
    dataIndex: 'weekday',
    key: 'weekday',
  },
  {
    name: '时长（分钟）',
    dataIndex: 'course_length',
    key: 'course_length',
  },
  {
    name: '剩余课时',
    dataIndex: 'left_course',
    key: 'left_course',
  },
  {
    title: 'Action',
    key: 'action',
  },
];
const data = ref([])
const loadData = () => {
  let url = `${server.apiBaseUrl}/zdppy_amstudent_record`
  axios({
    method: "get",
    url: url
  }).then(resp => {
    data.value = resp.data.data.results
  })
}

const onDeleteClick = (record) => {
  axios({
    method: "delete",
    url: `${server.apiBaseUrl}/zdppy_amstudent_record/` + record.id
  }).then(resp => {
    loadData()
    message.success("删除上课记录成功!")
  })
}


onMounted(() => {
  loadData()
})
</script>

<template>
  <a-table :columns="columns" :data-source="data">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'action'">
        <span>
          操作
        </span>
      </template>
      <template v-else>
        <span>
          {{ column.name }}
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <a-space wrap>
          <a-popconfirm
              title="您确定要删除吗？"
              ok-text="确认"
              cancel-text="取消"
              @confirm="onDeleteClick(record)"
          >
            <a-button
                type="primary"
                size="small"
                danger>
              删除
            </a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </template>
  </a-table>
</template>

<style scoped>

</style>